<template>
	<view class="order-detail">
		<uni-nav-bar :fixed="true" left-icon="back" :border="false" backgroundColor="#f9f2ea" :statusBar="true"
			leftText="订单详情" @clickLeft="goBack"></uni-nav-bar>
		<!-- <view class="order-top">
			<image class="img" src="../../static/success.png" mode=""></image>
		</view> -->
		<view class="address-box">
			<view class="address">
				<image class="img" src="../../static/location.png" mode=""></image>
				<view class="">
					<view class="address-top flex">
						<view class="name">
							{{orderData.consignee}}
						</view>
						<view class="phone">
							{{orderData.phone}}
						</view>
					</view>
					<view class="address-bottom flex">
						<view class="text">
							收货地址：{{orderData.area + orderData.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="logistics flex-between">
				<view class="">
					配送方式
				</view>
				<view class="">
					快递 {{orderData.logistics_amount == "0.00" ? "免运费" : "￥" + orderData.logistics_amount}}
				</view>
			</view>
		</view>

		<view class="goods">
			<view class="good-order-status">
				<view class="order-status">
					{{getOrderType(orderData.order_status)}}
				</view>
			</view>

			<view class="goods-top " v-for="(item, idx) in orderData.goods"
				:key="idx">
				<view class="flex">
					<image class="img" :src="item.goods_image || item.thumb" mode="aspectFit"></image>
					<view class="goods-top-left">
						<view class="name flex-between">
							<view class="">
								{{item.goods_name || "艺术品"}}
							</view>
						</view>
						<view class="specs flex-between">
							<view class="">
								{{item.goods_spec || ""}}
							</view>
						</view>
						<view class="price-box flex-between">
							<view class="price">
								￥{{item.goods_price || item.art_amount}}
							</view>
							<view class="number">
								× {{item.goods_num || 1}}
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="step" v-if="item.goods_type==2">
					<!-- <view class="title">定制品流程图</view> -->
					<view class="stepCont">
						<view class="left">
							<image v-for="(i,ind) in stepLeft" :key="ind" class="stepImg"
								:src="item.goods_status>=i.id?i.imgUrls:i.imgUrl" mode="aspectFit" @click="stepImg(i)">
							</image>
						</view>
						<view class="right">
							<image v-for="(i,ind) in stepRight" :key="ind" class="stepImg"
								:src="item.goods_status>=i.id?i.imgUrls:i.imgUrl" mode="aspectFit" @click="stepImg(i)">
							</image>
						</view>
					</view>
					<view class="lines"></view>
				</view>

			</view>
			<view class="goods-center">
				<!-- <view class="coupon flex-between" v-if="orderData.coupon_amount != 0">
					<view class="">
						优惠券减免
					</view>
					<view class="">
						{{orderData.coupon_amount}}
					</view>
				</view> -->
				<view class="flex amount">
					<view class="text">
						总价：
					</view>
					<view class="price">
						￥{{orderData.goods_amount}}
					</view>
				</view>
				<view class="flex payable" v-if="orderData.order_status != -1">
					<view class="">
						{{orderData.order_status == 1 ? "需付款：" : "实付款："}}
					</view>
					<view class="price">
						￥{{orderData.order_amount}}
						<text class="freight"
							v-show="orderData.logistics_amount != '0.00'">（含运费：￥{{orderData.logistics_amount}}）</text>
					</view>
				</view>
			</view>
			<view class="goods-bottom">
				<view class="btn " @click="deleteOrder(orderData.id)"
					v-if="orderData.order_status == 1 || orderData.order_status == 5 || orderData.order_status == -1">
					删除订单
				</view>
				<view class="btn appraise" v-show="orderData.order_status == 3" @click="confirm(orderData.id)">
					确认收货
				</view>
				<view class="btn"
					v-show="orderData.order_status == 3 || orderData.order_status == 4 || orderData.order_status == 5"
					@click="toLogistics(orderData.id)">
					查看物流
				</view>
				<view class="delete btn" v-show="orderData.order_status == 2" @click="refund(orderData.id)">
					退款
				</view>
				<view class="delete btn" v-show="orderData.order_status == 1" @click="cancel(orderData.id)">
					取消
				</view>
				<!-- <view class="appraise btn" v-show="orderData.order_status == 4">
					评价
				</view> -->
				<view class="appraise btn" v-show="orderData.order_status == 1" @click="payNow(orderData.id)">
					付款
				</view>
			</view>

		</view>
		<view class="describe">
			<view class="">
				订单编号：{{orderData.order_no}}
				<text @click="copy(orderData.order_no)">复制</text>
			</view>
			<view class="">
				付款时间：{{orderData.pay_time || "未付款"}}
			</view>
		</view>

		<view class="stepCover" v-if="stepShow">
			<view class="coverCont">
				<image src="../../static/cat.png"></image>
				<view class="str">
					{{itemStep.str}}
				</view>
				<view class="btn" @click="stepShow=false">
					喵，学废了
				</view>

			</view>
		</view>
		<recommend></recommend>
		<!-- <view class="btn-group flex">
			<view class="btn buy" @click="deleteOrder(orderData.id)">
				删除订单
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		orderInfo,
		payOrder,
		delOrder,
		cancelOrder,
		refundOrder,
		confirmOrder
	} from "@/api/public.js"
	import recommend from "@/components/recommend"
	export default {
		data() {

			return {
				goods_status: 0,
				id: "",
				orderData: {},
				stepLeft: [{
						id: 2,
						str: "塑形是指把陶泥或者瓷泥用拉坯、注浆、3D打印等方式塑造成你想要的形状，塑形完成需烘干或自然晾干（约48小时）后进入下一步",
						imgUrl: "../../static/1-2.png",
						imgUrls: "../../static/1.png",
					},
					{
						id: 4,
						str: "上釉是指将釉料涂于素坯表面，通常使用荡釉、浸釉、喷釉等方式以达到美观、防止渗透、增加强度等目的",
						imgUrl: "../../static/3-2.png",
						imgUrls: "../../static/3.png",
					}, {
						id: 6,
						str: "烤花是指将陶瓷器表面的釉上彩（或贴图）经一定温度（约800℃）热处理，使釉上彩（或贴图）牢固附着于釉面的过程。",
						imgUrl: "../../static/5-2.png",
						imgUrls: "../../static/5.png",
					}
				],
				stepRight: [{
					id: 3,
					str: "素烧是指将未上釉的生坯经一定温度（约800℃）热处理成为具有一定强度的素坯的过程，有利于后续上釉装饰",
					imgUrl: "../../static/2-2.png",
					imgUrls: "../../static/2.png",
				}, {
					id: 5,
					str: "釉烧是指将坯体经一定温度（约1280℃）热处理成为陶瓷成品的过程。",
					imgUrl: "../../static/4-2.png",
					imgUrls: "../../static/4.png",
				}, {
					id: 7,
					str: "",
					imgUrl: "../../static/6-2.png",
					imgUrls: "../../static/6.png",
				}],
				stepShow: false,
				itemStep: {}

			}
		},
		onLoad(obj) {
			this.id = obj.id;
			this.getInfo();
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						// console.log(value)
						uni.hideToast({
							title: '复制成功',
							duration: 5000,
							icon: 'none'
						});
						//以下就可自定义操作了~
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 5000,
							icon: 'none'
						});
					}
				});

			},
			goBack() {
				uni.navigateBack();
			},
			getInfo() {
				orderInfo(this.id).then(res => {
					this.orderData = res.reData.data;
				})
			},
			payNow(id) {
				payOrder(id).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						appid: res.reData.data.appId,
						timeStamp: "" + res.reData.data.timeStamp,
						nonceStr: res.reData.data.nonceStr,
						package: res.reData.data.package,
						signType: res.reData.data.signType,
						paySign: res.reData.data.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.switchTab({
								url: "../mine/mine"
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			toArtworkDetails(item) {
				if (item.goods_type == 1) {
					uni.navigateTo({
						url: "../index/artWorkDetails?id=" + item.id
					})
				} else {

				}
			},
			toLogistics(id) {
				uni.navigateTo({
					url: "logistics?id=" + id
				})
			},
			deleteOrder(id) {
				uni.showModal({
					title: '提示',
					content: '是否删除订单',
					success: (res) => {
						if (res.confirm) {
							delOrder(id).then(res => {
								if (res.result == 0) {
									this.getInfo();
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancel(id) {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: (res) => {
						if (res.confirm) {
							cancelOrder(id).then(res => {
								if (res.result == 0) {
									this.getInfo();
									uni.showToast({
										title: "取消成功",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			refund(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认退款',
					success: (res) => {
						if (res.confirm) {
							refundOrder(id).then(res => {
								if (res.result == 0) {
									this.getInfo();
									uni.showToast({
										title: "已提交申请",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirm(id) {
				confirmOrder(id).then(res => {
					if (res.result == 0) {
						this.getInfo();
						uni.showToast({
							title: "确认收货",
							icon: "none"
						})
					}
				})
			},
			//点击图片
			stepImg(i) {
				if (i.id == 7) {
					return;
				}
				this.itemStep = i;
				this.stepShow = true;

			}
		},
		computed: {
			getOrderType() {
				return function(type) {
					let str = "";
					switch (type) {
						case 1:
							str = "待付款";
							break;
						case 2:
							str = "待发货";
							break;
						case 3:
							str = "待收货";
							break;
						case 4:
							str = "待评价";
							break;
						case 5:
							str = "已完成";
							break;
						case 6:
							str = "已退款";
							break;
						case -1:
							str = "已取消";
							break;
					}
					return str
				}
			},
		},
		components: {
			recommend
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		padding: 0 30rpx 30rpx 30rpx;
		
	}

	.order-top {
		margin-bottom: 30rpx;

		.img {
			width: 100%;
			height: 140rpx;
		}
	}

	.address-box {
		padding: 24rpx 30rpx;
		background: #fffaf5;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);

		.address {
			display: flex;
			align-items: center;

			.img {
				width: 32rpx;
				height: 40rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			.address-top {
				margin-bottom: 20rpx;
				align-items: flex-end;

				.name {
					font-size: 32rpx;
					color: rgba(84, 54, 54, 1);
					margin-right: 20rpx;
				}

				.phone {
					color: rgba(128, 128, 128, 1);
					font-size: 24rpx;
				}
			}

			.address-bottom {
				align-items: center;

				.text {
					color: #666;
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}

		.logistics {
			margin-top: 20rpx;
			color: rgba(84, 54, 54, 1);
			font-size: 28rpx;
		}
	}

	.goods {
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);
		padding: 30rpx 30rpx 0;
		background: rgba(255, 250, 245, 1);
		margin-bottom: 30rpx;

		.good-order-status {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			line-height: 30rpx;
			color: rgba(166, 166, 166, 1);
			border-bottom: 2rpx solid #eee;
			padding: 0 0 20rpx;
			margin-bottom: 20rpx;

			.order-status {
				color: rgba(240, 116, 91, 1);
			}
		}

		.goods-top {
			
			margin-bottom: 20rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			.goods-top-left {
				flex-grow: 1;

				.name {
					font-size: 28rpx;
					line-height: 30rpx;
					color: rgba(84, 54, 54, 1);
					margin-bottom: 20rpx;

					.price {
						font-weight: 400;
						color: #d6323b;
					}
				}

				.specs {
					padding: 8rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					color: rgba(212, 148, 135, 1);
					margin-bottom: 20rpx;
					background-color: rgba(249, 242, 234, 1);
				}

				.colour {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #666;
					margin-bottom: 20rpx;
				}

				.post {
					font-size: 22rpx;
					line-height: 22rpx;
					color: #ccc;
					margin-bottom: 20rpx;
				}

				.price-box {
					color: rgba(214, 142, 127, 1);

					.price {
						font-size: 36rpx;
						font-weight: 700;
					}

					.number {
						font-size: 26rpx;
					}
				}
			}
		}

		.goods-center {
			padding-bottom: 20rpx;
			line-height: 60rpx;
			color: #666;
			font-size: 26rpx;
			display: flex;
			justify-content: flex-end;

			.flex {
				margin-left: 20rpx;
			}

			.amount {
				.text {
					color: rgba(128, 128, 128, 1);
					font-size: 24rpx;
					line-height: 56prx;
				}

				.price {
					color: rgba(166, 166, 166, 1);
					font-size: 36rpx;
					line-height: 56rpx;
					font-weight: 700;
				}
			}

			.payable {
				.text {
					color: rgba(84, 54, 54, 1);
					font-size: 24rpx;
					line-height: 56prx;
				}

				.price {
					color: rgba(214, 142, 127, 1);
					font-size: 36rpx;
					line-height: 56rpx;
					font-weight: 700;

					.freight {
						color: rgba(84, 54, 54, 1);
						font-size: 24rpx;
						line-height: 56prx;
					}
				}
			}

			.coupon {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #d6323b;
			}

			.price {
				color: rgba(166, 166, 166, 1);

				.text {
					color: #ccc;
				}
			}
		}

		.goods-bottom {
			padding: 20rpx 0;
			display: flex;
			justify-content: flex-end;

			.btn {
				width: 120rpx;
				height: 46rpx;
				border-radius: 24rpx;
				border: 2rpx solid rgba(128, 128, 128, 1);
				;
				text-align: center;
				color: rgba(128, 128, 128, 1);
				font-size: 22rpx;
				line-height: 44rpx;
				margin-left: 50rpx;
				box-shadow: 10rpx 10rpx 20rpx rgba(189, 185, 166, 0.5);
			}

			// .delete{
			// 	color: #fdb431;
			// }
			.appraise {
				color: rgba(214, 142, 127, 1);
			}
		}

		.logistics {
			.logistics-title {
				padding: 20rpx 0;
				color: #666;
				line-height: 34rpx;
				font-size: 24rpx;
			}

			.logistics-item {
				padding: 20rpx 0;
				color: #666;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
	}

	.describe {
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);
		background: rgba(255, 250, 245, 1);
		border-radius: 20rpx;
		padding: 20rpx;
		color: #666;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #543636;

		>view:first-child {
			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;

			>text {
				color: #d68e7f;
				margin-left: rpx;

			}

		}
	}

	.btn-group {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		left: 0;
		height: 72rpx;
		bottom: 60rpx;
		justify-content: center;

		.btn {
			width: 320rpx;
			border-radius: 36rpx;
			font-size: 30rpx;
			line-height: 72rpx;
			color: #fff;
			text-align: center;

			&.buy {
				background: rgba(214, 142, 127, 1);
			}
		}
	}

	.step {
		position: relative;

		.title {
			font-size: 24rpx;
			color: rgba(112, 77, 30, 1);
			text-align: center;
			margin: 20rpx 0;
		}

		>.lines {
			position: absolute;
			left: 50%;
			top: 50%;
			border: 2rpx solid #704d1e;
			height: 598rpx;
			transform: translate(-50%, -50%);
			margin-top: 0rpx;


		}

		.stepCont {
			display: flex;

			>view {

				width: 100%;

				.stepImg {
					width: 300rpx;
					height: 200rpx;
					display: inline-block;
					margin-top: 20rpx;
				}
			}

			>.left {
				text-align: right;
			}

			>.right {
				padding-top: 140rpx;
			}
		}


	}

	.stepCover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 10000000;

		.coverCont {
			padding: 66rpx 40rpx 40rpx 40rpx;
			width: 60%;
			position: relative;
			color: rgba(125, 84, 85, 1);
			background: rgba(252, 246, 234, 1);
			border: 2rpx dashed rgba(125, 84, 85, 1);

			border-radius: 60rpx;

			>image {
				position: absolute;
				top: -95rpx;
				left: 0;
				width: 300rpx;
				height: 150rpx;
			}

			>.btn {
				border: 2rpx solid #4c2c2a;
				box-shadow: 10rpx 10rpx 20rpx 0rpx rgba(238, 238, 228, 0.23);
				border-radius: 66rpx;
				background: #b89f88;
				color: #fff;
				text-align: center;
				margin: auto;
				padding: 30rpx;
				margin-top: 30rpx;
				width: 200rpx;

			}
		}

	}
</style>
